<template>
    <el-skeleton :rows="5" animated :loading="loading">
        <div class="creation-card " v-for="index in 15">

            <div class="creation-authorInfo">
                <el-avatar :size="30" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                <span style="margin-left: 5px;">小明发表了文章 · 2024-12-23</span>
            </div>

            <div class="creation-title">
                我在家做跨境电商，1个月还清了2.1w+贷款上岸，方法我全写出来了！（内附全套实操教程，新手必看！）
            </div>
            <div class="creation-content">
                <div class="creation-cover" v-if="index % 2 === 0">
                    <img src="https://pic2.zhimg.com/80/v2-3e322608e24d9705f4daa88a7588b099_720w.webp">
                </div>

                <div class="creation-description" :class="{ 'creation-description-change': index % 2 !== 0 }">
                    <p>
                        我之前是做跨境电商的，做这个行业，我之前是做跨境电商的，做这个行业，我之前是做跨境电商的，做这个行业，我之前是做跨境电商的，做这个行业，我之前是做跨境电商的，做这个行业，我之前是做跨境电商的，做这个行业，我之前是做跨境电商的，做这个行业，我之前是做跨境电商的，做这个行业，我之前是做跨境电商的，做这个行业，我之前是做
                    </p>
                </div>

            </div>

            <div class="creation-footer">
                <!-- 赞同次数 -->
                <div class="like">
                    <div v-if="false">
                        <el-icon>
                            <CaretTop />
                        </el-icon>
                        已赞同
                        <span>5</span>
                    </div>
                    <div v-else>
                        <el-icon>
                            <CaretTop />
                        </el-icon>
                        赞同
                        <span>3</span>
                    </div>
                </div>

                <!-- 踩 -->
                <div class="unlike">
                    <el-icon>
                        <CaretBottom />
                    </el-icon>
                </div>

                <div class="data">
                    <!-- 浏览次数 -->
                    <div class="data-item">
                        <el-icon>
                            <View />
                        </el-icon>
                        <span> 550</span>
                        次浏览
                    </div>

                    <!-- 讨论人数 -->
                    <div slot="查看详细" class="data-item">
                        <el-icon>
                            <ChatDotSquare />
                        </el-icon>
                        <span> 88</span>人参与讨论
                    </div>
                </div>

                <!-- 分享 -->
                <div class="share">
                    <el-icon>
                        <Promotion />
                    </el-icon>
                    分享
                </div>

                <!-- 收藏 -->
                <div class="collect">
                    <div v-if="false">
                        <el-icon>
                            <Star />
                        </el-icon>
                        收藏
                    </div>
                    <div v-else style="color: #a07f42;">
                        <el-icon>
                            <StarFilled />
                        </el-icon>
                        已收藏
                    </div>
                </div>

                <!-- 查看详情 -->
                <div class="detail">
                    <el-icon>
                        <MoreFilled />
                    </el-icon>
                    阅读全文
                </div>
            </div>
        </div>


    </el-skeleton>
</template>

<script setup lang="ts">
import { ref, onMounted,onActivated } from 'vue'
const loading = ref(true)

//加载
onMounted(() => {
    setTimeout(() => {
        loading.value = false
    }, 1000)
})
</script>

<style scoped>
.creation-card {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    cursor: pointer;
    margin-bottom: 25px;
    font-size: 15px !important;

    .creation-authorInfo {
        width: 100%;
        height: 30px;
        align-items: center;
        display: flex;
        margin-bottom: 5px;
        color: #75849a;
    }

    .creation-title {
        width: 100%;
        height: 25px;
        font-size: 18px;
        font-weight: bold;
        line-height: 25px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.3s;
        cursor: pointer;
    }

    .creation-title:hover {
        color: #09408e;
    }


    .creation-content {
        margin-top: 5px;
        height: 120px;
        text-align: left;
        display: flex;
        cursor: pointer;
        font-size: 15px !important;

        .creation-cover {
            width: 200px;
            background-color: rgb(82, 172, 88);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            border-radius: 5px;
            margin-right: 10px;

            img {
                width: 100%;
                height: auto;
            }
        }

        .creation-description {
            width: 470px;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 30px;
            line-clamp: 4;
            -webkit-line-clamp: 4;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            transition: all 0.3s;
            font-size: 15px;
        }

        .creation-description:hover {
            color: #707379;
        }

        .creation-description-change {
            width: 100%;
            ;
        }
    }

    .creation-footer {
        margin-top: 10px;
        height: 30px;
        display: flex;
        align-items: center;

        .like {
            background-color: rgba(23, 114, 246, .1);
            text-align: center;
            width: 120px;
            height: 30px;
            font-size: 14px;
            color: #1772f6;
            line-height: 30px;
            cursor: pointer;
            border-radius: 5px;
            margin-right: 10px;
        }

        .like:hover {
            background-color: rgba(23, 114, 246, .15);
            color: #1772f6;
        }

        .unlike {
            background-color: rgba(23, 114, 246, .1);
            text-align: center;
            width: 40px;
            height: 30px;
            font-size: 14px;
            color: #1772f6;
            line-height: 30px;
            cursor: pointer;
            border-radius: 5px;
            padding-left: 5px;
            padding-right: 5px;
        }

        .unlike:hover {
            background-color: rgba(23, 114, 246, .15);
            color: #1772f6;
        }

        .data {
            width: 280px;
            display: flex;
            margin-left: 20px;

            .data-item {
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                color: #75849a;
                cursor: pointer;
                width: 50%;
            }
        }

        .share {
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            color: #75849a;
            cursor: pointer;
            margin-right: 25px;
            transition: all 0.5s;
        }

        .share:hover {
            color: #2f6932fd;
        }

        .collect {
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            color: #75849a;
            cursor: pointer;
            transition: all 0.5s;
            margin-right: 25px;
        }

        .collect:hover {
            color: #a07f42;
        }

        .detail {
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            color: #5a87cb;
            cursor: pointer;
            transition: all 0.5s;
        }

        .detail:hover {
            color: #1772f6;
        }
    }
}
</style>